<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-modal="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <!--单向数据绑定-->
    <!--v-bind:title 是放上面有动态提示语,可以简写为:title，等号后面的"title"指的是下面vue中data中的属性-->
    <div v-bind:title="title">hello word</div>
    <!--<div :title="title">hello word</div>-->
    <!--双向数据绑定,v-modal,input变了content的值会发生变化，content的值发生改变时input里的值也改变-->
    <input v-model="content">
    <div>{{content}}</div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            title:"this is hello word",
            content:"this is content"
        }
        })
</script>
</html>